<template>
  <div class="change">
    <div class="change-body">
      <div class="search">
        <el-input v-model="username" placeholder="请输入内容" clearable></el-input>
        <el-select v-model="inputValue" placeholder="请选择用户类型" clearable>
          <el-option label="管理员" value="1"></el-option>
          <el-option label="普通用户" value="2"></el-option>
        </el-select>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
        >
        </el-date-picker>
        <el-button type="primary" @click="callDelLoginData">查询</el-button>
      </div>
      <div class="changepart">
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="登录日志" name="first">
              <getLoginDataform
                ref="getLoginDataform"  
                :type="inputValue"
                :username="username"
                :startDate="formatDate(value1[0])"
                :endDate="formatDate(value1[1])"
                @refreshData="handleRefreshData"
              />
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import getLoginDataform from "../menu/components_part/getLoginDataform.vue";
export default {
  components: {
    getLoginDataform,
  },
  data() {
    return {
      activeName: "first",
      type: "",
      username: "",
      value1: "",
      inputValue: "",
    };
  },
  methods: {
    handleRefreshData() {
      // 在这里调用你需要的方法
      console.log('数据刷新');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    formatDate(date) {
      return date ? moment(date).format("YYYY-MM-DD HH:mm:ss") : "";
    },
    callDelLoginData() {
      // 调用子组件的 getMenuData 方法
      this.$refs.getLoginDataform.getMenuData();
    },
    clearForm() {
      // 清空所有相关数据绑定变量
      this.username = "";
      this.inputValue = "";
      this.value1 = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  margin-bottom: 20px;

  .el-input {
    width: 400px;
    margin-right: 10px;
  }

  .el-button {
    margin-left: 10px;
  }

  .el-select {
    width: 400px;
    margin-right: 10px;
  }
}

.change {
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  padding: 20px;
  background-color: #f0f0f0;

  .change-body {
    width: calc(100% - 40px);
    padding: 20px;
    background-color: #fff;

    .changepart {
      width: 100%;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.16);
    }
  }
}

#pane-first > div {
  padding: 30px;
  min-width: 1000px;
}
</style>